<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>${blogUser.name}-的博客</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/client/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="/static/client/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<%-- 公共部分--%>
<jsp:include page="comonent/top.jsp"/>

  <div class="banner" <c:if test="${ not empty blogUser.bannerbg}">style="background-image:url('${blogUser.bannerbg}');"</c:if>>
    <div class="cont w1000">
      <div class="title">
        <h3>${blogUser.bigtitle}</h3>
        <h4>${blogUser.smalltitle}</h4>
      </div>
      <div class="amount">
        <p><span class="text">访问量</span><span class="access">1000</span></p>
        <p><span class="text">日志</span><span class="daily-record">1000</span></p>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="cont w1000">
      <div class="title" >
        <span class="layui-breadcrumb" lay-separator="|">
          <c:forEach items="${articeTypes}"  var="a" >
<%--            ${loginUser.conterpath}?articeTid=${a.id}--%>
          <a href="${blogUser.centerpath}?articeTid=${a.id}" <c:if test="${a.id==articeTid}">class="active"</c:if> >${a.name}</a>
          </c:forEach >
        </span>
      </div>
      <div class="list-item">
        <c:forEach var="a" items="${page.dataList}" varStatus="s">
          <c:if test="${d.index>0}">
          <c:set var="prev" value="${page.dataList[s.index-1].uuid}"></c:set>
          </c:if>
          <c:if test="${d.index < fn:length(page.dataList)-1}" >
            <c:set var="next" value="${page.dataList[s.index+1].uuid}"></c:set>
          </c:if>
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="${a.cover}" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>${a.title}<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                  <h5>时间：<fmt:formatDate value="${a.createtime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
                      &nbsp;&nbsp;阅读数量:${a.reader}
                      &nbsp;&nbsp;点赞数量:${a.awesome}
                  </h5>
                  <p>${a.summary}</p>
                  <a href="${blogUser.centerpath}/${a.uuid}?prev=${prev}&nest=${next}" class="layui-btn layui-btn-normal">点击阅读</a>
                </div>
            </div>
            </div>
           </div>
        </div>
        </c:forEach>
      </div>
      <div id="demo" style="text-align: center;"></div>
    </div>
  </div>
<%-- 公共部分--%>
<jsp:include page="comonent/foot.jsp"/>

  <input type="hidden" value="${page.pageIndex}" id="pageIndex">
  <input type="hidden" value="${page.count}" id="count">
  <input type="hidden" value="${articeTid}" id="articeTid">
  <script type="text/javascript" src="/static/client/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
      base: '/static/client/js/util/'
    }).use(['element','laypage','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;

      //执行一个laypage实例
      let page = laypage.render({
        curr: $("#pageIndex").val(),
        limit: 5,
        elem: "demo"//注意，这里的 test1 是 ID，不用加 # 号
        , count: $("#count").val() //数据总数，从服务端得到
        , jump: function (obj, first) {
          //首次不执行
          if (!first) {
            let path= location.href;
            if (path.indexOf("?")!=-1){
              path=path.substring(0,path.indexOf("?"))
            }
            window.location=path+"?pageIndex="+obj.curr+"&articeTid="+$("#articeTid").val()

          }
        }
      });

      menu.init();
    })
  </script>
</body>
</html>